<template>
  <div>
    <!-- 搜索框 -->
    <van-search
      name="van-slide-left"
      v-model="value"
      shape="round"
      background="#fff"
      placeholder="请输入搜索关键词"
      disabled
      @click="searchPopup()"
    />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <!-- :show-indicators=false 不要下面的小点 -->
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img :src="item.image_url" alt width="100%" height="100%" />
      </van-swipe-item>
    </van-swipe>

    <!-- 这句代码，是让下面这些代码，在其他页面的时候隐藏 -->
    <div class="height" v-show="$route.path=='/home'">
      <!-- 分类 -->
      <van-grid :column-num="5">
        <van-grid-item
          @click="fenlei(item.id)"
          v-for="item in channel"
          :key="item.id"
          :icon="item.icon_url"
          :text="item.name"
        />
      </van-grid>

      <!-- 品牌制造商 -->
      <div class="pinpai">
        品牌制造商直供
        <van-grid :gutter="0" :border="false" :column-num="2">
          <van-grid-item class="zhigong" v-for="item in brandList" :key="item.id">
            <img :src="item.pic_url" width="105%" />
            <div class="dingwei">
              <p>{{item.name}}</p>
              <p class="jiage">¥ {{item.floor_price}}.00 元</p>
            </div>
          </van-grid-item>
        </van-grid>
      </div>

      <!-- 周一周四·新品首发 -->
      <div class="pinpai">
        周一周四·新品首发
        <van-grid :gutter="0" :border="false" :column-num="2">
          <van-grid-item
            @click="detail(item.id)"
            class="zhigong"
            v-for="item in newGoodsList"
            :key="item.id"
          >
            <img :src="item.list_pic_url" width="105%" />
            <div>
              <p class="monday">{{item.name}}</p>
              <p class="jiage quaday">¥ {{item.retail_price}}.00 元</p>
            </div>
          </van-grid-item>
        </van-grid>
      </div>
      <!-- 人气推荐 -->
      <div class="pinpai">
        人气推荐
        <van-card
          class="renqi"
          v-for="item in hotGoodsList"
          :key="item.id"
          :price="item.retail_price"
          :desc="item.goods_brief"
          :title="item.name"
          :thumb="item.list_pic_url"
        />
      </div>
      <!-- 专题精选 -->
      <div class="pinpai ztjx">
        专题精选
        <van-swipe :show-indicators="false" :loop="false" :height="270" :width="280">
          <van-swipe-item class="zhuanti" v-for="item in topicList" :key="item.id">
            <img class="zhuanti-img" :src="item.item_pic_url" alt />
            <p class="zt-title">
              <span>{{item.title}}</span>
              <span>￥{{item.price_info}}</span>
            </p>
            <p class="zt-content">{{item.subtitle}}</p>
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 居家 -->
      <div class="jujia">
        <!-- 先循环categoryList的id和name -->
        <div v-for="item in categoryList" :key="item.id">
          {{item.name}}
          <div class="flex">
            <!-- 循环套循环  先遍历外边的categoryList，再遍历里面的goodsList，以goodsList.id循环遍历 -->
            <div v-for="item2 in item.goodsList" :key="item2.id" class="list">
              <img :src="item2.list_pic_url" width="85%" alt />
              <p>{{item2.name}}</p>
              <p class="price">￥ {{item2.retail_price}} 元</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 占位 -->
    <!-- vant 的右侧滑入 -->
    <transition name="van-slide-right">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
// 多个调用  用,隔开
import { GetHomeList } from "@/request/api.js";

export default {
  data() {
    return {
      banner: [],
      value: "",
      channel: [],
      brandList: [],
      newGoodsList: [],
      hotGoodsList: [],
      topicList: [],
      categoryList: []
    };
  },
  methods: {
    // 点击搜索，跳转到搜索页
    searchPopup() {
      this.$router.push("/home/searchPopup");
    },
    // 分类的点击
    fenlei(v) {
      this.$router.push("/channer" + "?id=" + v);
      // console.log(v);
    },
    // 点击周一周四，跳转详情页
    detail(d) {
      // console.log(d);
      this.$router.push("/detail/" + d);
    }
  },
  components: {},
  // 生命周期函数
  created() {
    // 接收接口申请的数据
    GetHomeList().then(res => {
      //  如果没错
      if (res.errno == 0) {
        // console.log(res);
        // 遍历轮播图
        this.banner = res.data.banner;
        // 分类
        this.channel = res.data.channel;
        // 品牌制造商
        this.brandList = res.data.brandList;
        // 周一周四·新品首发
        this.newGoodsList = res.data.newGoodsList;
        // 人气推荐
        this.hotGoodsList = res.data.hotGoodsList;
        // 专题精选
        this.topicList = res.data.topicList;
        // 居家
        this.categoryList = res.data.categoryList;
        this.categoryListId = res.data.categoryList;
        // console.log(res.data.categoryList);
      } else {
        console.log(res.errmsg);
      }
    });
  }
};
</script>

<style lang='less'  scoped>
// 分类
.van-grid {
  background-color: #fff;
  width: 100%;
}
// 品牌制造商
.pinpai {
  text-align: center;
  font-size: 0.2rem;
  font-family: 微雅软黑;
  letter-spacing: 0.018rem;
  margin-top: 0.2667rem;
  padding-top: 0.1333rem;
  background-color: rgb(255, 255, 255);
  padding-bottom: 0.1333rem;
}
// 品牌制造商
.pinpai {
  text-align: center;
  font-size: 0.2rem;
  font-family: 微雅软黑;
  letter-spacing: 0.018rem;
  margin-top: 0.2667rem;
  padding-top: 0.1333rem;
  background-color: rgb(255, 255, 255);
  padding-bottom: 0.1333rem;
}
.dingwei {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0.3267rem;
  left: 0.1333rem;
  font-size: 0.14rem;
}
.jiage {
  margin-top: 0.1267rem;
  color: rgb(170, 90, 90);
}
.zhigong div {
  margin: 0.04rem 0.0667rem;
  padding: 0;
}
.zhong img {
  height: 0.1333rem;
}
// 周一周四
.monday,
.quaday {
  // height: .4rem;
  font-size: 0.14rem;
}
.van-card {
  margin: 0.1333rem 0;
}
// 人气推荐
.renqi {
  text-align: left;
}
.van-card__title {
  font-size: 0.18rem;
  margin-top: 0.0667rem;
  margin-bottom: 0.1667rem;
  font-family: 黑体;
}
.van-card__price {
  color: rgb(174, 95, 95);
}
// 专题精选
.zhuanti-img {
  width: 90%;
  height: 2rem;
  padding-right: 0.2rem;
  margin-top: 0.2rem;
}
.zhuanti {
  height: 4.6667rem;
}
.ztjx {
  height: 2.9333rem;
}
.zt-title {
  font-size: 0.15rem;
  font-family: 黑体;
  margin: 0.1rem 0;
  padding: 0 0.0667rem;
  text-align: left;
  span:nth-child(2) {
    color: rgb(174, 89, 89);
  }
}
.zt-content {
  font-size: 0.13rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: 0.1333rem;
  padding-left: 0.0667rem;
  padding-right: 0.3333rem;
  text-align: left;
}
// 居家
.jujia {
  text-align: center;
  width: 100%;
  height: 100%;
  font-size: 0.2rem;
  font-family: 微雅软黑;
  letter-spacing: 0.018rem;
  margin-top: 0.2667rem;
  padding: 0.1333rem 0;
  background-color: rgb(255, 255, 255);
}
.flex {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.list {
  background-color: #fff;
  height: 100%;
  width: 45%;
  text-align: left;
  display: inline-block;
  margin-left: 12.5025px;
  font-size: 楷体;
  img {
    height: 100%;
  }
  p {
    font-size: 0.1333rem;
    height: 0.2rem;
    margin-bottom: 6.2475px;
    padding: 0 0 0 5.0025px;
    font-family: "宋体";
  }
  .price {
    color: rgb(203, 104, 104);
  }
}
// 解决tarbar压住内容  给整体的大盒子设置padding
.height {
  padding-bottom: .4667rem;
}
</style>
